<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>道具商店</title>

    <link href="/styles/base.css" rel="stylesheet" type="text/css">
    <link href="/styles/gonglve.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-form/jquery.form.js"></script>
    <link href="/js/plugins/jqPaginator/jqPagination.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>
    <script type="text/javascript" src="/js/system/gonglve.js"></script>
    <script type="text/javascript" src="/js/2019.js"></script>
    <script src="/js/system/common.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-cookie-v1.4.1/jquery.cookie.js"></script>
    <link href="http://css.mafengwo.net/css/cv/css+base:css+jquery.suggest:css+plugins:css+plugins+jquery.jgrowl:css+other+popup:css+app+topbar_v2^alw^1542357401.css"
          rel="stylesheet" type="text/css"/>


    <script language="javascript" type="text/javascript" crossorigin="anonymous"></script>
    <link href="http://css.mafengwo.net/css/daoju.css?1537192876" rel="stylesheet" type="text/css"/>
    <script language="javascript" type="text/javascript" crossorigin="anonymous"></script>
    <script type="text/javascript" src="../js/plugins/jquery-form/jquery.form.js"></script>


    <style type="text/css">
        m {
            position: absolute;
        }
    </style>
    <script type="text/javascript" src="/js/plugins/jqPaginator/jq-paginator.min.js"></script>
</head>
<body>


<form class="form-buy" action="/itemshop/buy" method="post" id="buyForm">
    <input id="id" type="hidden" value="0" name="id">
</form>

<form class="form-horizontal" action="/itemshop/comment" method="post" id="commentForm">
    <input id="type" type="hidden" value="has" name="id">
    <input id="content" type="hidden" value="0000" name="content">
</form>


<m id="coin"><img src="../images/coin.gif" height="200" width="200"/></m>
<script type="text/javascript" language="javascript">
    $(function () {
        //获取图片所在的div对象
        var pic = document.getElementById('coin');

        var w = document.body.clientWidth, h = document.body.clientHeight + 500; //窗口的大小
        //产生随机坐标
        var x = Math.random() * w;

        //var y = Math.random()*h;
        var y = 5;

        //图片的定位
        pic.style.left = x + "px";

        pic.style.top = y + "px";

        $("#coin").click(function () {
            this.remove();

            if (confirm("恭喜你获得一次抽奖机会")) {
                $.get("/itemshop/coin", function (data) {
                    <#--$("#gold").html('<i></i>'+(${userInfo.score}+data.data));-->
                });
                window.location.href = '/js/jquery-lhj/index.html'
            } else {

            }


        })

        //道具商店和我的道具切换
        var flag = $('._j_goods_list').data('flag');//0
        $('._j_goods_tab').click(function (ev) {
            var index = $(ev.currentTarget).data('index');
            if (index != flag) {
                flag = index;    //0 道具商店,1我的道具
                console.log(flag);
                $('._j_goods_tab').removeClass('active');
                $(ev.currentTarget).addClass('active');
                $(ev.currentTarget).siblings('strong').animate({left: 180 * flag}, 300);
                if (flag == 0) {
                    window.location.href = "/itemshop/list";
                } else {
                    $.get('/itemshop/myitem', function (data) {
                        $('._j_goods_list').remove();
                        $(".col-main").append(data);
                    });
                }
            }
        });


        //购买商品
        $('._j_not_buy').click(function () {
            var storenum = $(this).data('storenum');
            var price = $(this).data('price')
            var id = $(this).data('id')
            if (storenum <= 0) {
                popup('购买的商品无足够库存');
            } else {
                if (price >${userInfo.coins!}) {
                    popup('你的金币不够');
                } else {
                    var flag = confirm('确认购买？' + id + "号商品")
                    if (flag) {
                        $('.form-buy input[name=id]').val(id);
                        $(".form-buy").ajaxSubmit(function (data) {
                            if (data.success != true) {
                                popup(data.msg);
                            } else {
                                popup("已经装入你的百宝袋,请查看");
                                setTimeout(function () {
                                    window.location.href = "/itemshop/list";
                                }, 1000);
                            }
                        })
                    }
                }
            }
        })


    })

</script>
<div class="topBar">
    <div class="topBarC">
        <div class="logo"><a title="自由行" href="/">自由行</a></div>
        <div class="t_nav">
            <ul id="pnl_nav" data-cs-t="headnav_wo">
                <li data-cs-p="index">
                    <strong class="t"><a href="/">首页</a></strong>
                </li>
                <li data-cs-t="wenda" data-cs-p="wenda">
                    <strong class="t"><a data-cs-p="from_wo_nav" href="/ask/wenda">问答</a></strong>
                </li>
                <li data-cs-t="things" data-cs-p="things">
                    <strong class="t"><a data-cs-p="from_wo_nav" href="/itemshop/list">积分商城</a></strong>
                </li>
                <li data-cs-p="together">
                    <strong class="t"><a href="javascript:;">结伴</a></strong>
                </li>
                <li data-cs-p="group">
                    <strong class="t"><a href="javascript:;">小组</a></strong>
                </li>
                <li data-cs-p="mall">
                    <strong class="t"><a href="javascript:;">蜂首俱乐部</a></strong>
                </li>
                <li class="drop" data-cs-p="other">
                    <strong class="t"><a href="javascript:;">更多<b></b></a></strong>
                </li>
            </ul>
        </div>
        <div class="t_search">
            <form method="GET" action="/search/s.php" name="search">
                <input type="text" class="key" value="" name="q" id="word">
                <input type="submit" value="" class="btn">
            </form>
        </div>

        <div class="t_info">
            <div class="pagelet-block">
                <#if userInfo??>
                    <div class="login_info">
                        <div class="head_user">
                            <a href="/mine/home">
                                <img src="${(userInfo.headImgUrl)!'/images/default.jpg'}"/>
                                <i class="icon_caret_down"></i>
                            </a>
                        </div>
                        <div class="header_msg">
                            消息<i class="icon_caret_down"></i>
                        </div>
                        <div class="header_daka">
                            <a href="javascript:;">打卡</a>
                        </div>
                    </div>
                <#else>
                    <div class="login-out">
                        <a class="weibo-login" href="#" title="微博登录" rel="nofollow"></a>
                        <a class="qq-login" href="#" title="QQ登录" rel="nofollow"></a>
                        <a class="weixin-login" href="#" title="微信登录" rel="nofollow"></a>
                        <a id="_j_showlogin" title="登录骡窝窝" href="/login.html" rel="nofollow">登录</a>
                        <span class="split">|</span>
                        <a href="/regist.html" title="注册帐号" rel="nofollow">注册</a>
                    </div>
                </#if>
            </div>
        </div>
    </div>
</div>


<div class="container">

    <div class="mt-nav clearfix">

    </div>


    <!-- banner -->
    <div class="banner">
        <img src="http://images.mafengwo.net/images/daoju/banner.jpg" alt="">
    </div>


    <div class="row clearfix">
        <div class="col-main">

            <div class="daoju_tab">
                <a class="active _j_goods_tab" data-index="0">道具商店</a>
                <a class="_j_goods_tab" data-index="1">我的道具</a>
                <strong style="left: 0px"></strong>
            </div>



            <div class="daoju_list clearfix _j_goods_list" data-flag="0" data-total="2">
                <ul>
                    <#if pageInfo??>
                        <#list  pageInfo.list! as i>
                            <li class="_j_goods_li">
                                <div class="info">
                                    <a href="#" target="_blank">
                                        <img src="${i.itemUrl!}"
                                             alt="神奇逗猫棒">
                                        <#if i.storenum!=0>
                                            <div class="name">${i.name!}<span>剩余${i.storenum!}</span></div>

                                        <#else >
                                            <div class="name">${i.name!}<span>剩余${i.storenum!}</span></div>
                                            <i class="state1"></i>
                                        </#if>
                                    </a>
                                </div>
                                <div class="buy">
                                    <span><i class="icon_gold"></i>${i.price!}</span>
                                    <#if i.storenum!=0>
                                        <a class="btn_buy  _j_not_buy" data-storenum="${i.storenum!}"
                                           data-price="${i.price!}" data-id="${i.id!}">购买</a>
                                    <#else >
                                        <a class="btn_buy disabled _j_not_buy" data-storenum="${i.storenum!}">购买</a>
                                    </#if>
                                </div>
                            </li>
                        </#list>
                    </#if>
                </ul>
            </div>
            <div class="pagin" id="smallpager"></div>

        </div>

        <div class="col-side">

            <div class="side_my">
                <p>你的金币</p>
                <div id="gold" class="gold"><i></i>${userInfo.coins!}积分</div>
            </div>

            <div class="side_cmt">
                <div class="tit">留言板</div>
                <div class="con">
                    <div id="_j_comment_cnt">

                        <div class="addComment clearfix">
                            <div class="pub">
                                <textarea id="textarea" class="_j_comment_pubarea"></textarea>
                                <input type="button" class="_j_comment_pubbtn" value="发表留言">
                            </div>
                        </div>


                        <div class="commentList _j_comment_list"></div>
                        <div class="page _j_comment_pagination"></div>
                        <#if commentList??>
                            <#list  commentList as l>
                                <ul id="cmt_list" class="cmt_list">
                                    <li class="_j_citem" data-uid="${l.id!}" data-username="${l.username!}">
                                        <a href="" class="photo"><img src="${l.headUrl!}"></a>
                                        <a href="" class="user">${l.username!}</a>
                                        <a href="" class="level">LV.${l.level!}</a>
                                        <a href="#" class="_j_reply">回复</a>
                                        <span class="date">${(l.createTime)?string("yyyy-MM-dd HH:mm:ss")}</span>
                                        <p>${l.content!}</p>
                                    </li>
                                </ul>
                            </#list>
                        </#if>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>


<script>
    M.closure(function (require) {
        //初始化
        $("#shop").click();
        //点击回复触发文本框选中事件并填充内容
        $("._j_citem").click(function () {
            $("#type").val($(this).data("uid"));
            $("#textarea").val("回复@" + $(this).data("username") + ":").focus();
        });
        //发表留言
        $("._j_comment_pubbtn").click(function () {
            $("#content").val($("#textarea").val());
            //提交表单
            $("#commentForm").ajaxSubmit(function (data) {
               // $('._j_comment_pagination').remove();
                $("._j_comment_pagination").append(data);
              /*  $("#cmt_list").remove()；
                $("#cmt_list").html(data);*/
                $("#textarea").val("");
                $("._j_citem").click(function () {
                    $("#type").val($(this).data("uid"));
                    $("#textarea").val("回复@" + $(this).data("username") + ":").focus();
                });
            })
        });
    });
</script>

<#include "../common/footer.ftl">
</body>
</html>